<template>
  <div>
    <!--Modal 添加编辑成员 start-->
    <Modal
      :style="{top: '20px'}"
      :title="formValidate.id?'编辑':'添加'"
      @on-visible-change="onChangeVisibleModal"
      v-model="isShowAddOrUpdateEmployeeModal"
      width="700"
    >
      <div>
        <!--Form 添加编辑成员表单 start-->
        <Form :label-width="100" :model="formValidate" :rules="ruleValidate" ref="formValidate">
          <Row>
            <Col span="24">
              <FormItem label="分类名称" prop="category">
                <Input
                  :maxlength="50"
                  class="form-width"
                  placeholder="请输入"
                  v-model="formValidate.category"
                />
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="描述" prop="categoryDesc">
                <Input
                  :maxlength="200"
                  class="form-width"
                  placeholder="请输入"
                  v-model="formValidate.categoryDesc"
                />
              </FormItem>
            </Col>
          
          </Row>
        </Form>
        <!--Form 添加编辑成员表单 end-->
      </div>
      <div slot="footer">
        <Button @click="isShowAddOrUpdateEmployeeModal=false" type="text">取消</Button>
        <Button :loading="isShowLoading" @click="submitFormData" class="newBtn" type="primary">提交</Button>
      </div>
    </Modal>
    <!--Modal 添加编辑成员 end-->
  </div>
</template>
<script>
import $ from 'jquery';
import { customerCategoryApi } from '@/api/customer/customer-category';
export default {
  name: 'CustomerCategoryTableAdd',
  components: {
  },
  props: {
  },
  data() {
    return {
      isShowAddOrUpdateEmployeeModal: false,
      isShowLoading: false,
      formValidateBackup: {
        category: '',
        categoryDesc: ''
      },
      formValidate: {
        category: '',
        categoryDesc: ''
      },
      ruleValidate: {
        category: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {},
  watch: {
    // isShowAddOrUpdateEmployeeModal(val) {
      
    // }
  },
  filters: {},
  created() {},
  mounted() {
    
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    // 弹窗显示隐藏监听
    onChangeVisibleModal(value) {
      if (!value) {
        this.formValidate = Object.assign({}, this.formValidateBackup);
      }
    },
    // 打开Modal
    showModal(row) {
      this.$refs['formValidate'].resetFields();
      if (row && Object.keys(row).length > 0) {
        this.formValidate = Object.assign({}, row);
      }
      this.isShowAddOrUpdateEmployeeModal = true;
    },
    // 点击提交
    submitFormData() {
      this.$refs['formValidate'].validate(valid => {
        if (valid) {
          if (this.formValidate.id) {
            this.update(this.formValidate);
          } else {
            this.add(this.formValidate);
          }
        }
      });
    },
    // 修改成员
    async update(data) {
      try {
        this.isShowLoading = true;
        let result = await customerCategoryApi.update(data);
        this.isShowAddOrUpdateEmployeeModal = false;
        this.$Message.success('修改成功');
        this.$emit('addSuccess');
        this.$refs['formValidate'].resetFields();
      } catch (e) {
        //TODO zhuoda sentry
        console.error(e);
      } finally {
        this.isShowLoading = false;
      }
    },
    // 添加新用户接口
    async add(param) {
      try {
        this.isShowLoading = true;
        let result = await customerCategoryApi.add(param);
        this.isShowAddOrUpdateEmployeeModal = false;
        this.$Message.success('添加成功');
        this.$emit('addSuccess');
        this.$refs['formValidate'].resetFields();
      } catch (e) {
        //TODO zhuoda sentry
        console.error(e);
      } finally {
        this.isShowLoading = false;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.form-width {
  width: 100%;
}
.department-wrap {
  position: absolute;
  background-color: #ffffff;
  padding: 5px;
  border: 1px solid #dedede;
  width: 300px;
  z-index: 9;
  height: 250px;
  overflow-y: scroll;
}
.select-class {
  position: relative;
}
</style>
